<template>
	<div class="playerViews">
		<div class="backgrounBox" :style="{backgroundImage:'url('+curSong.al.picUrl+')'}"></div>
		<div class="ifonBox">
			<i class="iconfont icon-youjiantou" @click="colse"></i>
		</div>
		<div class="recordBox">
			<div class="record"><img src="../assets/disc-ip6.png" alt=""></div>
			<div class="lever"><img src="../assets/needle-ip6.png" alt=""></div>
			<div class="headPor"><img :src="curSong.al.picUrl" alt=""></div>
		</div>
		<div class="playIconBox">
			<i class="iconfont icon-shangyishou" @click="changeSong('pre')"></i>
			<i class="iconfont" @click="changeState()" :class="playerState=='playing'?'icon-zanting':'icon-bofang'"></i>
			<i class="iconfont icon-xiayishou" @click="changeSong('next')"></i>
		</div>
		<progressBar></progressBar>
	</div>
</template>

<script>
	import progressBar from '../components/progressBar.vue'
	export default{
		methods:{
			colse(){
				this.$emit('colseViews')
			},
			changeState(){
				if(this.playerState=="playing"){
					this.audio.pause();
					this.$store.commit("changePlayerState",'pause');
				}else{
					this.audio.play();
					this.$store.commit("changePlayerState",'playing');
				}
			},
			changeSong(type){
				this.$emit("changeSong",type)
			}
		},
		computed:{
			curSong(){
				return this.$store.state.currentSong
			},
			playerState(){
				return this.$store.state.playerState
			},
		},
		components:{
			progressBar
		}
	}
</script>

<style lang="scss" scoped>
	.playerViews{
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 100vh;
		background: white;
		transition: all 0.5s;
		z-index: 99;
	}
	.backgrounBox{
		width: 100vw;
		height: 100vh;
		background-size: cover;
		background-position: center;
		filter: blur(20px);
	}
	.ifonBox{
		text-align: left;
		padding-left: 10px;
		padding-top: 10px;
		position: fixed;
		top: 0;
		>i{
			font-size: 28px;
			color: black;
		}
	}
	.recordBox{
		.record{
			width: 75%;
			position: fixed;
			left: 13%;
			top: 10%;
			>img{
				width: 100%;
			}
		}
		.lever{
			width: 25%;
			position: fixed;
			left: 45%;
			top: 0;
			z-index: 1;
			>img{
				width: 100%;
			}
		}
		.headPor{
			width: 47%;
			position: fixed;
			left: 27%;
			top: 18%;
			>img{
				width: 100%;
				border-radius: 50%;
			}
		}
	}
	.playIconBox{
		position: fixed;
		left: 7%;
		bottom: 8%;
		>i{
			padding: 0 25px;
			font-size: 55px;
			color: white;
		}
	}
</style>
